<template>
  <div>
    <px-tabs v-model="activeWater" class="equipment-tabs" style="padding-left: 24px; background: white">
      <px-tab-pane v-for="(item, index) in tabPaneList" :key="index" :name="item.name">
        <template #label>
          <p class="pane-bottom">{{ item.label }}</p>
          <p class="pane-line" />
        </template>
      </px-tab-pane>
    </px-tabs>
    <poBody v-if="activeWater == 'chemicals'" :projectType="'chemical'" />
    <poBody v-if="activeWater == 'consumables'" :projectType="'sparePart'" />
    <poBody v-if="activeWater == 'waste'" :projectType="'waste'" />
    <poBody v-if="activeWater == 'other'" :projectType="'other'" />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
// import chemicals from "./chemicals.vue";
// import consumables from "./consumables.vue";
// import waste from "./waste.vue";
// import other from "./other.vue";
import poBody from "./poBody.vue";
const activeWater = ref("chemicals");
import { useRoute } from "vue-router";
const route = useRoute();
onMounted(() => {
  if (route.query.projectType) {
    activeWater.value = route.query.projectType;
  }
});
const tabPaneList = [
  { label: "化学品", name: "chemicals" },
  { label: "备件耗材", name: "consumables" },
  { label: "废弃物", name: "waste" },
  { label: "其他", name: "other" }
];
</script>
